<template>
  <div v-loading="loading" class="product-detail">
    <el-card>
      <div class="detail-content">
        <div class="product-images">
          <img :src="getImageUrl(product.image)" :alt="product.name" />
        </div>
        
        <div class="product-main">
          <h1>{{ product.name }}</h1>
          <p class="description">{{ product.description }}</p>
          
          <div class="price-box">
            <span class="label">价格：</span>
            <span class="price">¥{{ product.price }}</span>
          </div>
          
          <div class="info-item">
            <span class="label">库存：</span>
            <span :class="{ 'text-danger': product.stock < 10 }">
              {{ product.stock }} 件
            </span>
          </div>
          
          <div class="info-item">
            <span class="label">销量：</span>
            <span>{{ product.sales || 0 }} 件</span>
          </div>
          
          <div class="info-item">
            <span class="label">条形码：</span>
            <span>{{ product.barcode || '-' }}</span>
          </div>
          
          <div class="quantity-box">
            <span class="label">数量：</span>
            <el-input-number
              v-model="quantity"
              :min="1"
              :max="product.stock"
              @change="handleQuantityChange"
            />
          </div>
          
          <div class="action-buttons">
            <el-button
              type="primary"
              size="large"
              :icon="ShoppingCart"
              :disabled="product.stock === 0"
              @click="addToCart"
            >
              加入购物车
            </el-button>
            <el-button
              type="danger"
              size="large"
              :disabled="product.stock === 0"
              @click="buyNow"
            >
              立即购买
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
    
    <el-card class="product-specs">
      <template #header>
        <div class="card-header">商品详情</div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="商品名称">{{ product.name }}</el-descriptions-item>
        <el-descriptions-item label="商品分类">{{ product.categoryName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="商品价格">¥{{ product.price }}</el-descriptions-item>
        <el-descriptions-item label="库存数量">{{ product.stock }}</el-descriptions-item>
        <el-descriptions-item label="条形码">{{ product.barcode || '-' }}</el-descriptions-item>
        <el-descriptions-item label="生产日期">{{ product.productDate || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useCartStore } from '@/stores/cart'
import { getProductDetail } from '@/api/product'
import { ElMessage } from 'element-plus'
import { ShoppingCart } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const cartStore = useCartStore()

const loading = ref(false)
const product = ref({})
const quantity = ref(1)

onMounted(() => {
  loadProductDetail()
})

const loadProductDetail = async () => {
  loading.value = true
  try {
    const res = await getProductDetail(route.params.id)
    if (res.code === 200 && res.data) {
      product.value = res.data
    }
  } catch (error) {
    console.error('加载商品详情失败:', error)
    ElMessage.error('加载商品详情失败')
    // 使用模拟数据
    product.value = {
      id: route.params.id,
      name: '可口可乐',
      description: '经典口味，清爽解渴，330ml罐装',
      price: 3.5,
      image: 'https://via.placeholder.com/400',
      stock: 100,
      sales: 520,
      barcode: '6901234567890',
      categoryName: '饮料',
      productDate: '2024-01-01'
    }
  } finally {
    loading.value = false
  }
}

const handleQuantityChange = (value) => {
  if (value > product.value.stock) {
    quantity.value = product.value.stock
    ElMessage.warning('超过库存数量')
  }
}

const addToCart = async () => {
  if (product.value.stock === 0) {
    ElMessage.warning('商品已售罄')
    return
  }
  
  if (quantity.value > product.value.stock) {
    ElMessage.warning('超过库存数量')
    return
  }
  
  // 传递productId和数量，cartStore.addItem会显示提示信息
  await cartStore.addItem(product.value.id, quantity.value)
}

const buyNow = () => {
  if (product.value.stock === 0) {
    ElMessage.warning('商品已售罄')
    return
  }
  
  addToCart()
  router.push('/customer/cart')
}

const getImageUrl = (image) => {
  if (!image) return ''
  if (image.startsWith('http://') || image.startsWith('https://')) return image
  // 图片文件直接从后端服务器获取
  return `http://localhost:8080/${image.startsWith('/') ? image.slice(1) : image}`
}
</script>

<style lang="scss" scoped>
.product-detail {
  .el-card {
    margin-bottom: 20px;
  }
  
  .detail-content {
    display: flex;
    gap: 40px;
    
    .product-images {
      flex: 0 0 400px;
      
      img {
        width: 100%;
        border-radius: 8px;
      }
    }
    
    .product-main {
      flex: 1;
      
      h1 {
        font-size: 28px;
        margin-bottom: 15px;
      }
      
      .description {
        color: #666;
        margin-bottom: 20px;
        line-height: 1.6;
      }
      
      .price-box {
        background: #fff5f5;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
        
        .label {
          font-size: 14px;
          color: #666;
        }
        
        .price {
          font-size: 32px;
          color: #ff4d4f;
          font-weight: bold;
          margin-left: 10px;
        }
      }
      
      .info-item {
        margin-bottom: 15px;
        font-size: 14px;
        
        .label {
          color: #666;
          margin-right: 10px;
        }
        
        .text-danger {
          color: #ff4d4f;
        }
      }
      
      .quantity-box {
        margin: 20px 0;
        display: flex;
        align-items: center;
        
        .label {
          color: #666;
          margin-right: 10px;
        }
      }
      
      .action-buttons {
        display: flex;
        gap: 15px;
        margin-top: 30px;
        
        .el-button {
          flex: 1;
        }
      }
    }
  }
  
  .product-specs {
    .card-header {
      font-weight: bold;
    }
  }
}
</style>











